import React from 'react';
import ReactDOM from 'react-dom';

// class App extends React.Component {
//   constructor(props) {
//     super(props)

//     this.state = {
//       count: 1
//     }
//   }

//   componentDidMount() {
//     new Promise(resolve => {
//       this.setState({
//         count: this.state.count + 1
//       })
//       console.log(this.state.count)

//       this.setState({
//         count: this.state.count + 1
//       })
//       console.log(this.state.count)

//       resolve()
//     }).then((res) => {
//       this.setState({
//         count: this.state.count + 1
//       })
//       console.log(this.state.count)

//       this.setState({
//         count: this.state.count + 1
//       })
//       console.log(this.state.count)
//     })
//   }

//   render() {
//     return (
//       <div>{this.state.count}</div>
//     )
//   }
// }

// class App extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       number: 0,
//     };
//   }

//   handerClick = () => {
//     for (let i = 0; i < 5; i++) {
//       setTimeout(() => {
//         this.setState({ number: this.state.number + 1 });
//         console.log(this.state.number);
//       }, 1000);
//     }
//   };

//   render() {
//     return (
//       <div>
//         <button onClick={this.handerClick}>num++</button>
//       </div>
//     );
//   }
// }

// function App() {
//   const [num, setNumber] = React.useState(0);
//   const handerClick = () => {
//     for (let i = 0; i < 5; i++) {
//       setTimeout(() => {
//         setNumber(num + 1);
//         console.log(num);
//       }, 1000);
//     }
//   };
//   return <button onClick={handerClick}>{num}</button>;
// }

class App extends React.Component {
  state = {
    count: 0,
  };

  componentDidMount() {
    // react内部处理，存在事件合并，实际上只是执行了最后一次 setState
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    console.log('[1]', this.state.count); // 0

    // 函数的情况能获取到最新的state，所以不存在事件合并
    this.setState((state) => ({ count: state.count + 1 }));
    this.setState((state) => ({ count: state.count + 1 }));
    console.log('[2]', this.state.count); // 0

    // 以下不在react的批处理机制下，所以能拿到setState的最新state
    // 就是简单的js的micro和macro
    setTimeout(() => {
      this.setState({ count: this.state.count + 1 });
      console.log('timeout', this.state.count); // 6

      this.setState({ count: this.state.count + 1 });
      console.log('timeout', this.state.count); // 7
    }, 0);

    Promise.resolve().then((value) => {
      this.setState({ count: this.state.count + 1 });
      console.log('promise', this.state.count); // 4

      this.setState({ count: this.state.count + 1 });
      console.log('promise', this.state.count); // 5
    });
  }

  render() {
    const count = this.state.count;
    console.log('render', count); // 3 4 5 6 7
    return (
      <div>
        <p>{count}</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
